import { useEffect } from "react";
import { useDispatch, useSelector } from "umi";
import BarChart from "./components/BarChart";
import Table from "./components/Table";

function Attendance() {
  const dispatch = useDispatch();
  const attendance = useSelector((state: any) => state.attendance.attendance);
  useEffect(() => {
    dispatch({
      type: "attendance/getAttendanceData",
      payload: {},
    });
  }, []);
  return (
    <div className="w-full h-scrren flex gap-2">
      <div className="flex flex-col gap-4 w-1/2 h-screen">
        <BarChart data={attendance?.later} />
        <BarChart data={attendance?.early} />
      </div>
      <div className="flex flex-col gap-4 w-1/2 h-screen">
        <Table
          data={attendance?.table?.value.filter(
            (item: any) => item.reason === "迟到"
          )}
          title="迟到详情"
        />
        <Table
          data={attendance?.table?.value.filter(
            (item: any) => item.reason === "早退"
          )}
          title="早退详情"
        />
      </div>
    </div>
  );
}

export default Attendance;
